import DefaultImage from '@/asset/default-image.png';
import { getSession } from '@/lib/auth';
import { listRecommendedShops } from '@/service/query/shop';
import Link from 'next/link';
import DownToTopView from '../common/motion/down-to-top-view';
import QueryImage from '../common/query-image';
import Pagination from './pagination';

export default async function RecommendShopList({
  searchParams,
}: { searchParams: Record<string, any> }) {
  const session = await getSession();
  if (!session?.user)
    return <div className="text-center py-10">用户未登录</div>;

  const { result: addresses, error } = await listRecommendedShops({
    userId: session.user.id,
    page: searchParams.page,
    pageSize: searchParams.pageSize,
  });
  if (error) return <div className="text-center py-10">{error.message}</div>;

  return (
    <div>
      <DownToTopView>
        <div className=" space-y-8">
          <div className="font-bold text-lg text-end">个性推荐</div>
          {addresses.data.map((shop) => (
            <Link
              key={shop.id}
              className="block"
              href={`/detail-shop/${shop.id}`}
            >
              <div className="flex gap-3 hover:bg-muted transition-colors rounded-lg cursor-pointer">
                <div className="shrink-0">
                  <QueryImage
                    imageKey={shop.imageKeys[0]}
                    defaultImage={DefaultImage}
                    wrapperClassName="w-40 h-28 rounded-lg"
                    imgClassName="object-cover w-full h-full rounded-lg"
                  />
                </div>
                <div className="py-2 px-1 relative">
                  <div className="font-bold text-lg">{shop.name}</div>
                  <div className="text-sm text-muted-foreground">
                    {shop.description}
                  </div>
                  <div className="text-xs text-muted-foreground absolute bottom-1">
                    订单量: {shop.orderCount}
                  </div>
                </div>
              </div>
            </Link>
          ))}
          <Pagination next={addresses?.next ?? null} />
        </div>
      </DownToTopView>
    </div>
  );
}
